<template>
	<div class="sys-container">
		<el-dialog v-model="state.isShowDialog" draggable width="769px" v-if="state.isDisplayed">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="产品名称" prop='productId'
							:rules="[{ required: true, message: '媒体产品不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.selectedProduct" value-key="value" placeholder="请选择"
								class="w100" :disabled="props.title === '编辑'">
								<el-option v-for='item in state.productDict' :key='item.value' :label='item.label'
									:value='item' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="省份" prop="province">
							<el-select v-model.trim="state.ruleForm.province" placeholder="省份" class="w100"
								:disabled="props.title === '编辑'">
								<el-option v-for='item in optionDict.provinceDict' :key='item.value' :label='item.label'
									:value='item.value' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="屏蔽城市" prop="city">
							<el-input v-model.trim="state.ruleForm.city" placeholder="请输入屏蔽城市"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label='日期'>
							<el-date-picker class='w100' v-model='state.UTCDateRange' type='datetimerange'
								range-separator='至' start-placeholder='开始日期' end-placeholder='结束日期'
								:shortcuts='shortcuts' :disabled="props.title === '编辑'" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="起始小时" prop="dailyStartHour">
							<el-input-number v-model.trim="state.ruleForm.dailyStartHour" placeholder="请输入起始小时" :min="0"
								:max="23" controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="结束小时" prop="dailyEndHour">
							<el-input-number v-model.trim="state.ruleForm.dailyEndHour" placeholder="请输入结束小时" :min="1"
								:max="23" controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="互斥周期" prop="phoneUniqueMonthly">
							<el-input-number v-model.trim="state.ruleForm.phoneUniqueMonthly" placeholder="月单位" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="到量控制" prop="arrivalType">
							<el-radio-group v-model="state.ruleForm.arrivalType">
								<el-radio :label="1">请求</el-radio>
								<el-radio :label="2">用户</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户上限" prop="userLimit">
							<el-input-number v-model.trim="state.ruleForm.userLimit" placeholder="请输入用户数上限" :min="0"
								controls-position="right" style="width:100%"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="请求上限" prop="requestLimit">
							<el-input-number v-model.trim="state.ruleForm.requestLimit" placeholder="请输入请求上限" :min="0"
								controls-position="right" style="width:100%"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态">
							<el-select v-model="state.ruleForm.status" placeholder="请选择" class="w100">
								<el-option label="启用" :value="1"></el-option>
								<el-option label="停用" :value="2" :disabled="true"></el-option>
								<el-option label="到量" :value="3" :disabled="true"></el-option>
								<el-option label="短期关停" :value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="管控级别" prop="controlLevel">
							<el-input-number v-model="state.ruleForm.controlLevel" placeholder="请输入管控级别" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model="state.ruleForm.sort" placeholder="请输入排序" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权重" prop="weight">
							<el-input-number v-model="state.ruleForm.weight" placeholder="请输入权重" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="报警用户" prop="weight">
							<el-input-number v-model="state.ruleForm.alarmSubscribeUser" placeholder="请输入报警订购用户"
								:min="0" controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="媒体反馈" prop="isMediaFeedback">
							<el-radio-group v-model="state.ruleForm.isMediaFeedback">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="当日同步" prop="controlLevel">
							<el-radio-group v-model="state.ruleForm.syncPlanDaily" class="ml-4">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注">
							<el-input v-model="state.ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"
								:autosize="{ minRows: 2 }" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog v-model="state.isShowDialog" width="569px" v-if="!state.isDisplayed">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">

				<el-row :gutter="5">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号码" prop="hourlyLimit">
							<el-input v-model="state.phone" placeholder="请输入手机号码" clearable maxlength='11'></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="">
							<el-button size="default" type="primary" class="ml10" @click="queryPhone()">
								<el-icon>
									<ele-Promotion />
								</el-icon>
								发送短信
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="响应信息" prop="remark">
							<el-input type="textarea" v-model="state.information" placeholder="" multiline
								clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<!--  -->

				<el-row :gutter="5">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="验 证 码" prop="hourlyLimit">
							<el-input v-model="state.code" placeholder="请输入验证码" minlength='6' maxlength='6'
								clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="">
							<el-button size="default" type="primary" class="ml10" @click="queryCode()">
								<el-icon>
									<ele-Promotion />
								</el-icon>
								回填验证码
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="响应信息" prop="remark">
							<el-input type="textarea" v-model="state.codeInformation" placeholder="" multiline
								clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>


			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="editDiToucherProductPlan">
import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { optionDict } from '/@/const/dict.ts';
import { convertLocalDate, datePickerShortcuts } from '/@/utils/formatTime';

import { DiToucherProductPlan } from '/@/api/models';
import SysDiCustomerProductApi from '/@/api/delivery/customerProduct';
import SysDiToucherProductPlanApi from '/@/api/delivery/toucherProductPlan';
import { ElMessage } from 'element-plus';
import request from '/@/utils/request';
const shortcuts = datePickerShortcuts();
const props = defineProps({
	title: String,
});

const ruleFormRef = ref();
const state = reactive({
	UTCDateRange: [new Date(), new Date()],
	selectedProduct: null,
	productDict: [],
	isShowDialog: false,
	ruleForm: {} as DiToucherProductPlan,
	isDisplayed: false,
	phone: '',
	code: '',
	information: '',
	codeInformation: ''
});

// 打开弹窗
const openDialog = async (row: DiToucherProductPlan, data) => {
	if (data == 'update') {
		await productDictQuery();
		state.selectedProduct = state.productDict.find((item) => {
			return item.value === row.productId;
		}) ?? null;
		state.ruleForm = row;
		state.ruleForm.syncPlanDaily = 1;
		state.UTCDateRange = [row.startTime ? row.startTime : state.UTCDateRange[0], row.endTime ? row.endTime : state.UTCDateRange[1]];
		state.isShowDialog = true;
		state.isDisplayed = true;
	} else {
		await productDictQuery();
		state.selectedProduct = state.productDict.find((item) => {
			return item.value === row.productId;
		}) ?? null;
		state.ruleForm = row;
		state.ruleForm.syncPlanDaily = 1;
		// if (!(state.UTCDateRange[0] as Date))
		// 	state.UTCDateRange[0] = new Date(state.UTCDateRange[0]);
		// if (!(state.UTCDateRange[1] as Date))
		// state.UTCDateRange[1].setHours(23);
		// 	state.UTCDateRange[1] = new Date(state.UTCDateRange[1]);
		// state.UTCDateRange[1].setMinutes(59);
		// state.UTCDateRange[1].setSeconds(59);
		state.UTCDateRange = [row.startTime ? row.startTime : state.UTCDateRange[0], row.endTime ? row.endTime : state.UTCDateRange[1]];
		state.isShowDialog = true;
		state.isDisplayed = false;
		state.codeInformation = '';
		state.code = '';
		state.information = '';
	}

};

const queryPhone = async () => {
	let res = await request({
		url: `https://ch.qimingwenhua.net/Changing/SendSMS?phone=${state.phone}&t=${state.ruleForm.code}&extdata=透传参数`,
		method: "get",
	})
	state.information = JSON.stringify(res.data);
}

const queryCode = async () => {
	let serial = JSON.parse(state.information);
	let res = await request({
		url: `https://ch.qimingwenhua.net/Changing/VerifySMS?serialNumber=${serial.result.serialNumber}&verifyCode=${state.code}`,
		method: "get",
	})
	state.codeInformation = JSON.stringify(res.data)
}

// 关闭弹窗
const closeDialog = () => {
	mittBus.emit('submitRefresh');
	state.isShowDialog = false;
	state.UTCDateRange = [new Date(), new Date()];
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	state.ruleForm.startTime = state.UTCDateRange[0];
	state.ruleForm.endTime = state.UTCDateRange[1];
	state.ruleForm.productId = state.selectedProduct?.value;
	state.ruleForm.platformId = state.selectedProduct?.exValue;
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
		let res = await SysDiToucherProductPlanApi().editPost(state.ruleForm);
		if (res.data.resCode != '0000')
			ElMessage.error(res.data.resMessage);
		else {
			ElMessage.success("操作成功");
			closeDialog();
		}
	});
};

// 媒体列表
const productDictQuery = async () => {
	await SysDiCustomerProductApi().queryAll().then((res) => {
		if (res.data.resCode === '0000')
			state.productDict = res.data.result ?? [];
	});
};

// 导出对象
defineExpose({ openDialog });
</script>
